<div class="updatable-input updatable-input-text">
    <!-- Display empty text -->
    <span ng-if="!updatable.updating && (!value || value.length ===0 )" class="updatable-input-value-wrapper" ng-click="edit()">
        <span class="updatable-value text-warning"><em>Not Specified</em></span>

        <small class="updatable-input-icon">
            <i class="glyphicon glyphicon-pencil"></i>
        </small>
    </span>

    <!-- Display empty text -->
    <span ng-if="!updatable.updating && value.length >0" class="updatable-input-value-wrapper updatable-input-markdown">
        <small class="updatable-input-icon clickable" ng-click="edit()">
            <i class="glyphicon glyphicon-pencil"></i>
        </small>

        <div marked="value" class="markdown"></div>
    </span>

    <div class="form-group" ng-show="updatable.updating">
        <textarea name="content" class="content-box" markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}" rows="10" ng-model="value"></textarea>

        <div class="mt-xxxs">
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-sm btn-default" ng-click='update()'>
                    <i class="text-success glyphicon glyphicon-ok"></i>
                </button>
                <button type="button" class="btn btn-sm btn-default" ng-click='cancel()'>
                    <i class="text-danger glyphicon glyphicon-remove"></i>
                </button>
                <button class="btn btn-sm btn-default" type="button" ng-click="clear()" ng-if="clearable === true">
					<i class="text-danger glyphicon glyphicon-erase"></i>
				</button>
            </div>
            <a class="pull-right" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">
                <i class="fa fa-question-circle"></i> Markdown Reference</a>
        </div>
    </div>
</div>
